<template>
  <div style="text-align: center;margin: 0px; border-bottom: 1px; padding-bottom: 50px;">
    <!--    <h1 style="font-size: 50px;">{{'欢迎你！'+user.name}}</h1>-->
    <el-descriptions style="border-bottom: 20px; margin-top: 40px" title="账号管理" :column="3" :size="size" border >

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle" ><Picture /></el-icon>

            头像
          </div>
        </template>
        <div class="block">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/studyadmin/student/uploadImage"
              multiple
              name="image"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <el-avatar :size="50"  v-if="user.avatar"  :src="user.avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>



        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            学号
          </div>
        </template>
        {{user.teaNum}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            性别
          </div>
        </template>
        <el-tag
            :type="user.sex === '1' ? 'primary' : 'danger'"
            disable-transitions><i :class="user.sex==1?'el-icon-male':'el-icon-female'"></i>{{user.sex==1?"男":"女"}}
        </el-tag>

      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <chat-dot-round />
            </el-icon>
            昵称
          </div>
        </template>
        {{user.teaName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <promotion />
            </el-icon>
            邮箱
          </div>
        </template>
        {{user.teaEmail}}
      </el-descriptions-item>
    </el-descriptions>
    <div >

      <el-button type="primary" @click="copyData()">修改信息</el-button>

      <el-button type="success">修改密码</el-button>
<!--      <el-button type="success" v-if="addClass==='1'" @click="studyDate">学习数据</el-button>-->
      <el-button type="danger">注销账号</el-button>
    </div>


    <!--    <DateUtils></DateUtils>&lt;!&ndash; 时间显示&ndash;&gt;-->

    <!-- 编辑弹出框 -->
    <el-dialog v-model="editFormVisible" title="编辑" center>
      <el-form :model="editForm" ref="editform" :rules="formRules" status-icon>
        <el-form-item label="账号" :label-width="formLabelWidth" prop="teaNum" style="align-items: center;"  >
          <el-input v-model="editForm.teaNum"  autocomplete="off" disabled blur="" style="width: 300px;" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="teaName" style="align-items: center;" >
          <el-input v-model="editForm.teaName" autocomplete="off" style="width: 300px;"/>
        </el-form-item>

        <el-form-item label="性别" :label-width="formLabelWidth" style="align-items: center;" >
          <el-radio-group v-model="editForm.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="teaEmail" style="align-items: center;" >
          <el-input v-model="editForm.teaEmail"  autocomplete="off" style="width: 300px;" />
        </el-form-item>
      </el-form>
      <template #footer>
			  <span class="dialog-footer">
			    <el-button @click="editFormVisible = false">取消</el-button>
			    <el-button type="primary" @click="editData">
			      确认
			    </el-button>
			  </span>
      </template>
    </el-dialog>





  </div>




</template>

<script>
import { ref , reactive} from 'vue'

import {ElMessage, ElNotification} from "element-plus";

export default {
  name: "TeaMain",
  data() {
    const validateAge = (rule, value, callback) => {
      let age = /^[\d]+$/;
      if(age.test(value)) {
        if(value < 18 || value > 60) {
          callback(new Error('请输入18~60之间的年龄'))
        }
        callback();
      }else {
        callback(new Error('请输入正确格式的年龄'))
      }
    };

    return {
      applyMsg:'',
      Classes:[],
      claNum:'',//班级id
      addClass:'', //是否加入了班级
      clState:'',
      imageUrl:'',//头像
      user : {},
      className:'',
      userTip : '',
      editInfo : ref(false),

      editForm: reactive({
        teaNum:NaN,					//管理员账号
        teaName:'',
        sex:1,				//管理员性别
        teaEmail:'',	//邮箱
      }),
      addClassFormVisible : ref(false),
      editFormVisible : ref(false),
      formLabelWidth : '180px',
      formRules:{
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        age:[
          {required: true, message: '请输入年龄', trigger: 'blur'},
          {validator: validateAge, trigger: 'blur' }
        ],
        teaEmail: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: '请输入正确的邮箱',
            trigger: "blur"
          }
        ],

      }
    }
  },

  mounted() {

    this.init();
  },


  methods:{


    addClassClick(){
      this.addClassFormVisible = true;
    },


    beforeAvatarUpload(){

    },
    //修改头像
    handleAvatarSuccess(res){
      this.user.avatar = res.data
      // let  teaNum = this.loginStateStore.loginUserName
      let  teaNum=window.sessionStorage.getItem("userNum")
      // console.log("图片地址=====",this.user.avatar)
      let _this = this
      let url = "/studyadmin/teacher/updateImg"
      _this.$axios.get(url,{params:{avatar:_this.user.avatar,teaNum:teaNum}}).then(function(data){
        _this.init();
        if (data.data.code == 0){

          ElMessage.success(data.data.msg)
        }else {
          ElMessage.error(data.data.msg)
        }
      }).catch(function(){

      })
    },



    closeStuData(){
      this.clState='0';
    },

    init(){
      let _this=this
      // let  teaNum = this.loginStateStore.loginUserName
      let  teaNum=window.sessionStorage.getItem("userNum")

      let url="/studyadmin/teacher/teaMain"
      _this.$axios.get(url,{params: {teaNum:teaNum}}).then(function(serverData) {
console.log("hahahahahahhaahahaha",serverData.data.data)
        if(serverData.data.code===0){
          _this.user=serverData.data.data;
        }
      })



      // let url2="/studyadmin/classes/stuClass"
      // _this.$axios.get(url2,{params: {teaNum:teaNum}}).then(function(serverData) {
      //   // console.log("serverData.data.data=f9sd9f8s9df==",serverData.data.data)
      //   //已经加入班级
      //   //  console.log("12121212",serverData.data.count)
      //   if(serverData.data.count===1){
      //
      //     // _this.user=serverData.data.data;
      //     _this.className=serverData.data.data
      //     _this.addClass='1'
      //   }else if(serverData.data.count===0){
      //     //未加入班级
      //     _this.className='未加入班级'
      //     _this.addClass='0'
      //     _this.applyMsg="点击加入班级"
      //   }
      // })



    },
    copyData(){
      this.editForm.teaNum = this.user.teaNum;
      this.editForm.teaName = this.user.teaName;
      this.editForm.sex = this.user.sex;
      this.editForm.teaEmail = this.user.teaEmail;
      this.editFormVisible = true;
    },
    // 编辑时点击确认调用该方法，将数据提交到数据库
    editData() {
      let _this = this;
      let url = "/studyadmin/teacher/updateInfo";
      let _sex = _this.editForm.sex;
      this.$refs.editform.validate((valid, fields) => {
        if (valid) {
          _this.editFormVisible = false;
        }
      });
      _this.$axios.post(url, _this.editForm).then(function (serverData) {
        if (serverData.data.code===0) {
          _this.init();
          ElNotification({
            title: '修改成功',
            message: serverData.data.msg,
            type: 'success',
          })
        }else {
          ElNotification({
            title: 'Warning',
            message: serverData.data.msg,
            type: 'warning',
          });
        }
        // window.sessionStorage.setItem("loginUserInfo",JSON.stringify(serverData.data.data));
        // _this.user = JSON.parse(sessionStorage.getItem('loginUserInfo'));
      });

    },
    // userDivTip() {
    //   if(this.user.sex ) {
    //     document.getElementById("userDivTip").hidden = "hidden";
    //   }
    // }
  },

}
</script>

<style scoped>

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-descriptions{
  width:90%;

  margin: 0 auto;
  text-align: center;
}

.avatar-uploader .el-upload {
  /*border: 1px dashed var(--el-border-color);*/
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  /*color: #8c939d;*/
  width: 178px;
  height: 178px;
  text-align: center;
}

</style>

